<template>
  <div class="scroll-wrap user-bg">
  	<div class="user-header">
     <figure class="user-figure">
      <div class="thumb">
       <img :src="userInfo.head_img_url">
      </div>
       <div class="figcaption">
         <figcaption class="user-name">{{userInfo.nickname || '没登录~'}}</figcaption>
         <span class="vip">开通会员</span>
       </div>
     </figure>
     <div class="logo"></div>
    </div>
    <router-link class="panel order" to="/order_list" tag="div">
      <h2 class="left title">我的订单</h2>
      <div class="right felx more">
        <span class="text">全部订单</span>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-next"></use>
          </svg>
      </div>
    </router-link>
    <ul class="profit">
      <router-link tag="li" to="/order_list?type=1" class="item">
        <strong>{{userInfo.order_unpaid || 0}}</strong>
        待付款
      </router-link>
      <router-link tag="li" to="/order_list?type=2" class="item">
        <strong>{{userInfo.order_undelivery || 0}}</strong>
        待配送
      </router-link>
      <router-link tag="li" to="/order_list?type=3" class="item">
        <strong>{{userInfo.order_unreceived || 0}}</strong>
        待收货
      </router-link>
      <router-link tag="li" to="/order_list?type=4" class="item">
        <strong>{{userInfo.order_uncomment || 0}}</strong>
        已完成
      </router-link>
    </ul>
    <div class="mine-nav">
      <div class="panel">
        <router-link tag="div" to="/address_list" class="left flex">
          <svg class="icon icon-adress" aria-hidden="true">
            <use xlink:href="#icon-adress"></use>
          </svg><span class="text">我的地址</span>
        </router-link>
        <div class="right"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-next"></use>
          </svg></div>
      </div>
      <router-link tag="div" to="/coupon" class="panel flex">
        <div class="left">
          <svg class="icon icon-jifenjuan" aria-hidden="true">
            <use xlink:href="#icon-jifenjuan"></use>
          </svg><span class="text">优惠券</span>
        </div>
        <div class="right"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-next"></use>
          </svg></div>
      </router-link>
      <div class="panel flex">
        <div class="left">
          <svg class="icon icon-mendian" aria-hidden="true">
            <use xlink:href="#icon-mendian"></use>
          </svg><span class="text">e家门店</span>
        </div>
        <div class="right"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-next"></use>
          </svg></div>
      </div>
      <div class="panel flex">
        <div class="left" @click="contact">
          <svg class="icon icon-kefu" aria-hidden="true">
            <use xlink:href="#icon-kefu"></use>
          </svg><span class="text">联系客服</span>
        </div>
        <div class="right"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-next"></use>
          </svg></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      title: 'mine'
    }
  },
  beforeCreate() {
    this.$store.dispatch('getRequestData')
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'getUserInfo'
    }),
    userInfo() {
      return this.getUserInfo || {}
    }
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    contact() {
      /* eslint-disable */
      WeixinJSBridge.call('closeWindow')
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '~@/assets/styles/mine';
</style>
